.relation-pop,
.relation-pop-two {
    position: relative;
    height: 430px;
}
.relation-pop-three {
    position: relative;
    height: 400px;
}

.relation-item {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    background-color: #F0B463;
}

.relation-pop-two .relation-item {
    background-color: #F09B63;
}

.relation-pop-three .relation-item {
    border: 3px solid #D8793A;
    background-color: #fff;
    width: 280px;
    height: 280px;
}

.relation-item-title {
    color: #000;
    padding: 0 40px;
    line-height: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.relation-item-title-two {
    color: #000;
    margin-bottom: 10px;
    text-align: center;
    margin: 0 auto;
}

.relation-item-value {
    color: #fff;
    padding: 0 44px;
    line-height: 24px;
}

.relation-pop .relation-item:nth-child(1) {
    width: 320px;
    height: 320px;
    top: 0;
    left: -34px;
}

.relation-pop .relation-item:nth-child(2) {
    width: 260px;
    height: 260px;
    top: 175px;
    left: 261px;
}

.relation-pop .relation-item:nth-child(3) {
    width: 320px;
    height: 320px;
    top: 18px;
    left: 508px;
}

.relation-item-title-index {
    font-size: 42px;
    font-weight: 600;
    margin: 6px;
}

.relation-pop-two .relation-item:nth-child(1) {
    width: 320px;
    height: 320px;
    top: 40px;
    left: 54px;
}

.relation-pop-two .relation-item:nth-child(2) {
    width: 320px;
    height: 320px;
    top: 0px;
    left: 461px;
}

.relation-sub-title {
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 20px;
}

.relation-sub-title-num span {
    font-size: 24px;
    font-weight: bold;
}

.page-item-five-relation .page-item-five-item:nth-child(odd) {
    background-color: #f3cb96;
}

.page-item-five-relation .page-item-five-item:nth-child(even) {
    background-color: #f5d59a;
}

.relation-pop-three .relation-item:nth-child(1) {
    top: 50px;
    left: 150px;
}

.relation-pop-three .relation-item:nth-child(2) {
    top: -97px;
    left: 506px;
}

.relation-pop-three .relation-item:nth-child(3) {
    top: 254px;
    left: 510px;
}

.relation-pop-three .relation-item-value {
    color: #000;
}

.relation-item-title-three {
    padding: 0 44px;
    line-height: 24px;
}

.relation-pop-three .relation-item::after {
    content: '';
    position: absolute;
    width: 150px;
    border-bottom: 3px dashed #D8793A;
    z-index: -1;
}

.relation-pop-three .relation-item:nth-child(1)::after {
    top: 66px;
    right: -96px;
    transform: rotate(147deg);
}

.relation-pop-three .relation-item:nth-child(2)::after {
    bottom: -49px;
    right: 80px;
    transform: rotate(-99deg);
}

.relation-pop-three .relation-item:nth-child(3)::after {
    top: 77px;
    left: -136px;
    transform: rotate(-147deg);
}

.page-item-six-relation {
    display: flex;
    flex-wrap: wrap;
}

.page-item-six-item {
    width: calc(50% - 160px);
    padding: 40px;
    border-radius: 20px;
    margin-right: 40px;
    margin-bottom: 20px;
}

.page-item-six-item-title {
    color: #393939;
    margin-bottom: 34px;
}

.page-item-six-item-value {
    color: #fff;
}

.page-item-six-item:nth-child(1) {
    background-color: #F09B63;
    margin-top: 40px;
}

.page-item-six-item:nth-child(2) {
    margin-bottom: 20px;
    background-color: #F0B463;
}

.page-item-six-item:nth-child(3) {
    margin-left: 50px;
    margin-top: 20px;
    background-color: #F0B463;
}

.page-item-six-item:nth-child(4) {
    background-color: #F09B63;
}

.page-item-example {
    padding: 10px;
    border: 3px solid #da8851;
    border-radius: 12px;
    background-color: #ffecdc;
    margin-right: 20px;
    font-size: 14px;
}

.relation-love-warp {
    position: relative;
    height: 500px;
}

.relation-love-item {
    width: 300px;
    height: 260px;
    position: absolute;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    padding-bottom: 20px;

}

.relation-love-item:nth-child(even) {
    background: url('./../../assets/img/detail/relation/love-odd.svg');
    background-size: cover;
}

.relation-love-item:nth-child(odd) {
    background: url('./../../assets/img/detail/relation/love-even.svg') no-repeat;
    background-size: cover;
}

.relation-love-title {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    padding: 0 80px;
}

.relation-love-name {
    line-height: 20px;
    font-size: 16px;
    padding: 0 0 0 80px;
}

.relation-love-value {
    color: #fff;
    padding: 0 40px 0 80px;
}

.relation-love-warp .relation-love-item:nth-child(1) {
    top: 100px;
    left: -50px;
}

.relation-love-warp .relation-love-item:nth-child(2) {
    top: 0;
    left: 188px;
}

.relation-love-warp .relation-love-item:nth-child(3) {
    top: 18px;
    left: 508px;
    width: 280px;
    height: 250px;
}

.relation-love-warp .relation-love-item:nth-child(4) {
    top: 258px;
    left: 215px;
}

.relation-love-warp .relation-love-item:nth-child(5) {
    top: 233px;
    left: 500px;
}

.relation-total-score {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.relation-total-item {
    padding: 10px 20px;
    border: 3px solid #F09B63;
    border-radius: 16px;
    background-color: #fff;
    margin-right: 20px;
    display: flex;
    font-size: 24px;
    font-weight: bold;
}

.relation-total-title {
    color: #F09B63;
    margin-right: 4px;
}

@media screen and (max-width: 1600px) {
    .relation-total-item {
        padding: 4px 10px;
        font-size: 20px;
    }
}

.bg-wave-relation-l,.bg-wave-relation-r::before,.bg-wave-relation-r::after,.bg-wave-relation-l::after{
    background: -webkit-gradient(linear, 0 0, 0 50%, from(rgba(255, 178, 130, 0.3)), to(transparent)) !important;
}
.bg-wave-relation-r{
    background: transparent!important;
}
.bg-wave-relation-l::after{
    content: '';
    position: absolute;
    border-radius: 100%;
    width: 258px;
    height: 331px;
    top: 97px;
    left: 307px;
    z-index: 0;
}
.bg-wave-relation-r::after{
    width: 376px;
}
.bg-wave-relation-r::before{
    width: 310px;
    left: 170px;
}
.page-cloud-m-relation{
    top: 92px!important;
    right: 36%!important;
}
.page-cloud-r-relation{
    right: 31% !important;
    top: 57px !important;
}

:where(.css-dev-only-do-not-override-j9bb5n).ant-checkbox .ant-checkbox-inner {
    /* background: url(../../assets/img/detail/relation/ok.svg) no-repeat; */
    /* background-size: cover; */
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

:where(.css-dev-only-do-not-override-j9bb5n).ant-checkbox .ant-checkbox-inner:after {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    inset-inline-start: 25%;
    display: table;
    width: 12px;
    height: 20px;
    border: 5px solid #fff;
    border-top: 0;
    border-inline-start: 0;
}